<template>
  <view class="test-info">
    <view class="info-content">
      <view class="info-main" v-if="infoShow === 1">
        <form @submit="formSubmit" @reset="formReset">
          <view class="uni-form-item uni-column">
            <view class="title">姓名</view>
            <input class="uni-input" name="name" placeholder="输入姓名" />
          </view>
          <view class="min" v-show="showName">请正确输入姓名</view>
          <view class="uni-form-item uni-column">
            <view class="title">年龄</view>
            <slider
              block-size="20"
              activeColor="#20b1ff"
              value="30"
              name="age"
              show-value
            ></slider>
          </view>
          <view class="uni-form-item uni-column">
            <view class="title">性别</view>
            <radio-group name="gender">
              <label>
                <radio
                  style="transform: scale(0.7)"
                  color="#20b1ff"
                  value="1"
                />
                <text>男</text>
              </label>
              <label>
                <radio
                  style="transform: scale(0.7)"
                  color="#20b1ff"
                  value="2"
                />
                <text>女</text>
              </label>
            </radio-group>
          </view>
          <view class="min" v-show="showGender">请选择性别</view>
          <view class="uni-form-item uni-column">
            <view class="title">电话</view>
            <input
              class="uni-input"
              name="phoneNumber"
              placeholder="输入电话"
            />
          </view>
          <view class="min" v-show="showPhone">请正确输入电话号码</view>
          <view class="uni-form-item uni-column">
            <view class="title">住址</view>
            <input
              class="uni-input"
              name="address"
              placeholder="例:六号楼一栋628"
            />
          </view>
          <view class="min" v-show="showAddress">请正确输入地址</view>
          <view class="uni-btn-v">
            <button plain="true" form-type="submit">立即验证</button>

            <!-- <button type="default" form-type="reset">Reset</button> -->
          </view>
        </form>
      </view>
      <view class="info-step" v-else-if="infoShow === 2">
        <uni-steps
          active-color="#20b1ff"
          :options="[
            { title: '提交验证' },
            { title: '正在验证' },
            { title: '验证通过' },
          ]"
          :active="infoShow - 1"
        ></uni-steps>
        <view class="info-step-test"> 请等待工作人员验证 </view>
      </view>
      <view class="info-step" v-else-if="infoShow === 3">
        <uni-steps
          active-color="#20b1ff"
          :options="[
            { title: '提交验证' },
            { title: '正在验证' },
            { title: '验证通过' },
          ]"
          :active="infoShow - 1"
        ></uni-steps>
        <view class="info-step-test" style="color: #15bc84"> 已验证通过 </view>
      </view>
    </view>
  </view>
</template>

<script>
import uniSteps from "@/components/uni-steps/uni-steps.vue";
export default {
  data() {
    return {
      show: true,
      infoShow: 4,
      openid: "",
      showName: false,
      showGender: false,
      showPhone: false,
      showAddress: false,
    };
  },
  components: { uniSteps },
  // onLoad() {
  // 	this.openidTest();
  // },
  onShow() {
    let that = this;
    uni.getStorage({
      key: "openid",
      success: function (res) {
        console.log(res.data);
        that.openid = res.data;
        that.openidTest(); //检测注册状态
      },
      fail: function (res) {
        uni.navigateTo({
          url: "login",
          // success: (res) => {
          // },
          fail: (err) => {
            console.log(err);
          },
        });
      },
    });
  },
  methods: {
    formSubmit(e) {
      console.log(
        "form发生了submit事件，携带数据为：" + JSON.stringify(e.detail.value)
      );
      let formdata = e.detail.value;
      console.log(formdata);
      console.log(formdata.name.length);
      if (formdata.name.length < 2 || formdata.name.length > 5) {
        this.showName = true;
        return;
      } else {
        this.showName = false;
      }
      console.log(formdata.gender.length);
      if (formdata.gender.length == 0) {
        this.showGender = true;
        return;
      } else {
        this.showGender = false;
      }
      let phoneReg = /^1\d{10}$/;
      if (!phoneReg.test(formdata.phoneNumber)) {
        this.showPhone = true;
        return;
      } else {
        this.showPhone = false;
      }
      console.log(formdata.address.length);
      if (formdata.address.length <= 5) {
        this.showAddress = true;
        return;
      } else {
        this.showAddress = false;
      }

      this.$MyRequest({
        url: "/set_people_info",
        method: "POST",
        data: {
          openid: this.openid,
          name: formdata.name,
          age: formdata.age,
          gender: formdata.gender,
          phoneNum: formdata.phoneNumber,
          address: formdata.address,
        },
      }).then((res) => {
        this.openidTest();
      });
    },
    formReset: function (e) {
      console.log("清空数据");
    },

    openidTest() {
      this.$MyRequest({
        url: "/test_openid",
        method: "POST",
        data: {
          openid: this.openid,
        },
      }).then((res) => {
        console.log(res.data.mesg + "post返回");
        this.infoShow = res.data.mesg;
      });
    },
  },
};
</script>

<style lang="scss">
@import "@/static/styles/mixin.scss";
.test-info {
  width: 100%;
  height: 100vh;
  background-color: $uni-color-indexBg;
  // background-color: #000;
  .info-content {
    // box-sizing: border-box;
    // padding: 0 15rpx;
    margin: 0 15rpx;
    border-radius: 2%;
    // background-color: $uni-color-mainBg;
    // margin-bottom: 50rpx;
    .info-main {
      padding: 0 15rpx;
      background-color: $uni-color-mainBg;
      box-sizing: border-box;
      .uni-column {
        border-bottom: 1rpx solid #d8d8de;
        padding: 12rpx 0;

        .title {
          padding: 10rpx 0;
        }
      }
      .uni-btn-v {
        padding: 50rpx 0 20rpx 0;
        // border-top: 0 20rpx solid;
        button {
          width: 50%;
          border-radius: 30rpx;
          font-size: 24rpx;
          color: #fff;
          // size: 10;
          height: 70rpx;
          @include center;
          background-color: $uni-color-primary;
          border: none;
        }
      }
    }
    .info-step {
      // margin-top: 20%;
      width: 100%;
      padding: 30rpx 0;
      box-sizing: border-box;
      // marggn-top: 100rpx;
      // background-color: $uni-color-mainBg;
      .uni-steps {
        // height: 200rpx;
        background-color: $uni-color-mainBg;
        active-color: $uni-color-primary;
        // transform: scale(1.1);
        padding: 60rpx 0;

        box-sizing: border-box;
        // @include center;
        // font-size:80rpx;
        .uni-steps__row {
          // transform: scale(1.8);
        }
      }
    }
    .info-step-test {
      background-color: $uni-color-mainBg;
      padding: 0 0 20rpx 0;
      @include center;
      color: $uni-color-warning;
    }
  }
  .min {
    font-size: 19rpx;
    color: #fa3534;
    // font-weight: bold;
  }
}
</style>
